import React, { Component } from 'react'
import { Link } from 'react-router-dom';

import { Menu } from 'antd';
import {
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from '@ant-design/icons';
import './index.less'
import logo from '../../assets/images/logo.png'
/**
 * 左侧导航组件
 */
const { SubMenu } = Menu;

export default class LeftNav extends React.Component {
  render() {
    return (
      <div className='left-nav'>
        <Link to='/' className='left-nav-header'>
          <img src={logo} alt="" />
          <h1>商城后台</h1>
        </Link>
        <Menu
          defaultSelectedKeys={['2']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <Link to='/home'>首页</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<DesktopOutlined />}>
            <Link to='/good'>商品管理</Link>
          </Menu.Item>
          <Menu.Item key="3" icon={<ContainerOutlined />}>
            订单管理
          </Menu.Item>
          <SubMenu key="sub1" icon={<MailOutlined />} title="权限管理">
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
          </SubMenu>
          <Menu.Item key="4" icon={<ContainerOutlined />}>
            用户管理
          </Menu.Item>
        </Menu>
      </div>
    )
  }
}